<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Customer</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" lay-filter="table-search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select">

                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">角色ID</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleId" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <!-- 结果区域：始终显示表头 -->
        <div style="margin-top: 10px;">
            <!-- 加载状态 -->
            <div v-if="isLoading" style="text-align: center; padding: 20px;">
                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                <span style="margin-left: 10px;">正在加载角色数据...</span>
            </div>
            
            <!-- 数据统计信息 -->
            <div v-if="detail && !isLoading" style="background: #f8f8f8; padding: 10px; margin-bottom: 10px; border-radius: 4px; font-size: 12px; color: #666;">
                <span>魂侍：{{dataStats.petCount}}个</span> | 
                <span>装备：{{dataStats.combatCount}}个</span> | 
                <span>道具：{{dataStats.bagCount}}个</span>
            </div>
            
            <!-- 空数据提示 -->
            <div v-if="!detail && !isLoading" style="text-align: center; padding: 40px; color: #999;">
                <i class="layui-icon layui-icon-search" style="font-size: 48px; color: #ddd;"></i>
                <p style="margin-top: 10px;">请输入角色ID进行查询</p>
            </div>
            <fieldset class="layui-elem-field">
                <legend>基础信息</legend>
                <div class="layui-field-box">
                    <table class="layui-table">
                        <colgroup>
                            <col width="120">
                            <col width="220">
                            <col width="120">
                            <col width="220">
                            <col width="120">
                            <col width="220">
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>角色ID</td>
                            <td>{{detail && detail.id || '-'}}</td>
                            <td>账号ID</td>
                            <td>{{detail && detail.memid || '-'}}</td>
                            <td>角色名</td>
                            <td>{{detail && detail.nick || '-'}}</td>
                        </tr>
                        <tr>
                            <td>职业</td>
                            <td>{{detail && detail.job || '-'}}</td>
                            <td>性别</td>
                            <td>{{detail && detail.sex || '-'}}</td>
                            <td>等级</td>
                            <td>{{detail && detail.level || '-'}}</td>
                        </tr>
                        <tr>
                            <td>建角时间</td>
                            <td>{{detail && (detail._createtime || fmt(detail.createtime)) || '-'}}</td>
                            <td>最近登录</td>
                            <td>{{detail && getLastLoginTime(detail) || '-'}}</td>
                            <td>在线状态</td>
                            <td>{{detail ? (detail.isOnline ? '在线' : '离线') : '-'}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend>付费信息</legend>
                <div class="layui-field-box">
                    <div class="layui-row" style="margin-bottom: 6px;">
                        <div class="layui-col-md12">
                            充值金额：{{pay.totalAmount || 0}}　充值次数：{{pay.totalTimes || 0}}
                        </div>
                    </div>
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>付费笔数</th>
                            <th>订单编号</th>
                            <th>礼包名称</th>
                            <th>礼包ID</th>
                            <th>付费金额</th>
                            <th>付费时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(row,idx) in pay.list" :key="idx">
                            <td>{{(pay.page-1)*pay.limit + idx + 1}}</td>
                            <td>{{row.order_no}}</td>
                            <td>{{row.name}}</td>
                            <td>{{row.goods_id}}</td>
                            <td>{{row.fee}}</td>
                            <td>{{fmt(row.created_at)}}</td>
                        </tr>
                        <tr v-if="!pay.list.length">
                            <td colspan="6" class="layui-text" style="text-align: center;">暂无数据</td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="pay-pager" v-show="pay.total > 0" style="text-align: right;"></div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend>魂侍信息</legend>
                <div class="layui-field-box">
                    <div>激活数量：{{(detail && detail.pet && detail.pet.num) || 0}} 
                        <span v-if="detail && detail.pet && detail.pet.list && detail.pet.list.length > 50" style="color: #999; font-size: 12px;">
                            (显示前50个，共{{detail.pet.list.length}}个)
                        </span>
                    </div>
                    <table class="layui-table" v-if="petList.length">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>魂侍名</th>
                            <th>激活时间</th>
                            <th>1次进阶时间</th>
                            <th>2次进阶时间</th>
                            <th>洗髓次数</th>
                            <th>训练次数</th>
                            <th>资质评分</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,idx) in petList" :key="idx">
                            <td>{{idx+1}}</td>
                            <td>{{getPetName(p)}} </td>
                            <td>{{p._timeDisplay ? p._timeDisplay.activate : getTimeDisplay(p.time, 0)}}</td>
                            <td>{{p._timeDisplay ? p._timeDisplay.advance1 : getTimeDisplay(p.time, 1)}}</td>
                            <td>{{p._timeDisplay ? p._timeDisplay.advance2 : getTimeDisplay(p.time, 2)}}</td>
                            <td>{{p.wash_count || 0}}</td>
                            <td>{{p.lock_count || 0}}</td>
                            <td>{{p.as || 0}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div v-else class="layui-text">暂无魂侍数据</div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend>装备信息</legend>
                <div class="layui-field-box">
                    <div v-if="detail && detail.combat && detail.combat.list && detail.combat.list.length > 20" style="margin-bottom: 10px; color: #999; font-size: 12px;">
                        显示前20个装备，共{{detail.combat.list.length}}个
                    </div>
                    <table class="layui-table" v-if="combatList.length">
                        <thead>
                        <tr>
                            <th>位置</th>
                            <th>装备名</th>
                            <th>装备等级</th>
                            <th>强化等级</th>
                            <th>装备品质</th>
                            <th>评分</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(e,idx) in combatList" :key="idx">
                            <td>{{e.data && e.data.postion}}</td>
                            <td>{{e.data && (e.data._equipName || getEquipName(e.data.id))}}</td>
                            <td>{{e.data && (e.data._equipLevel || getEquipLevel(e.data.id))}}</td>
                            <td>{{(e.data && e.data.equip && e.data.equip.boostLv) || 0}}</td>
                            <td>{{e.data && (e.data._equipQuality || getEquipQuality(e.data.id)) || '-'}}</td>
                            <td>{{(e.data && e.data.equip && e.data.equip.fightVal) || 0}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div v-else class="layui-text">暂无装备数据</div>
                </div>
            </fieldset>

            <fieldset class="layui-elem-field">
                <legend>道具信息</legend>
                <div class="layui-field-box">
                    <div v-if="detail && detail.bag && detail.bag.list && detail.bag.list.length > 100" style="margin-bottom: 10px; color: #999; font-size: 12px;">
                        显示前100个道具，共{{detail.bag.list.length}}个
                    </div>
                    <table class="layui-table" v-if="bagList.length">
                        <thead>
                        <tr>
                            <th>格位</th>
                            <th>道具</th>
                            <th>品质</th>
                            <th>非绑定数量</th>
                            <th>绑定数量</th>
                            <th>总计数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(b,idx) in bagList" :key="idx">
                            <td>{{b.index}}</td>
                            <td>{{b.data && (b.data._itemName || getItemName(b.data.id))}}</td>
                            <td>{{b.data && (b.data._itemQuality || getItemQuality(b.data.id)) || '-'}}</td>
                            <td>{{b.data.bind === 0 ? b.data.count : 0}}</td>
                            <td>{{b.data.bind === 1 ? b.data.count : 0}}</td>
                            <td>{{b.data.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div v-else class="layui-text">暂无背包数据</div>
            </div>
        </fieldset>

            <fieldset class="layui-elem-field">
                <legend>操作统计</legend>
                <div class="layui-field-box">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>操作</th>
                            <th>操作次数</th>
                            <th>累计消耗1</th>
                            <th>累计消耗2</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>装备打造</td>
                            <td>{{(detail && detail.combat && detail.combat.make_count) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.make_consume1) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.make_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>装备强化</td>
                            <td>{{(detail && detail.combat && detail.combat.boost_count) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.boost_consume1) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.boost_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>装备洗练</td>
                            <td>{{(detail && detail.combat && detail.combat.wash_count) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.wash_consume1) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.wash_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>装备签名</td>
                            <td>{{(detail && detail.combat && detail.combat.sign_count) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.sign_consume1) || 0}}</td>
                            <td>{{(detail && detail.combat && detail.combat.sign_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>魂侍洗髓</td>
                            <td>{{(detail && detail.pet && detail.pet.wash_count) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.wash_consume1) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.wash_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>资质训练</td>
                            <td>{{(detail && detail.pet && detail.pet.train_count) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.train_consume1) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.train_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>成长训练</td>
                            <td>{{(detail && detail.pet && detail.pet.growth_count) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.growth_consume1) || 0}}</td>
                            <td>{{(detail && detail.pet && detail.pet.growth_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>天赋重置</td>
                            <td>{{(detail && detail.talent && detail.talent.reset_count) || 0}}</td>
                            <td>{{(detail && detail.talent && detail.talent.reset_consume1) || 0}}</td>
                            <td>{{(detail && detail.talent && detail.talent.reset_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>参与阵营战</td>
                            <td>{{(detail && detail.battle && detail.battle.faction_count) || 0}}</td>
                            <td>{{(detail && detail.battle && detail.battle.faction_consume1) || 0}}</td>
                            <td>{{(detail && detail.battle && detail.battle.faction_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>参与裂隙副本</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.rift_count) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.rift_consume1) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.rift_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>11</td>
                            <td>参与遗迹秘境</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.ruin_count) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.ruin_consume1) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.ruin_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>12</td>
                            <td>参与魂侍幻境</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.pet_illusion_count) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.pet_illusion_consume1) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.pet_illusion_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>13</td>
                            <td>参与守卫图书馆</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.library_count) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.library_consume1) || 0}}</td>
                            <td>{{(detail && detail.dungeon && detail.dungeon.library_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>14</td>
                            <td>参与经验镖次数</td>
                            <td>{{(detail && detail.escort && detail.escort.exp_count) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.exp_consume1) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.exp_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>15</td>
                            <td>参与银币镖次数</td>
                            <td>{{(detail && detail.escort && detail.escort.silver_count) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.silver_consume1) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.silver_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>16</td>
                            <td>参与公会镖次数</td>
                            <td>{{(detail && detail.escort && detail.escort.guild_count) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.guild_consume1) || 0}}</td>
                            <td>{{(detail && detail.escort && detail.escort.guild_consume2) || 0}}</td>
                        </tr>
                        <tr>
                            <td>17</td>
                            <td>进行挖宝次数</td>
                            <td>{{(detail && detail.treasure && detail.treasure.dig_count) || 0}}</td>
                            <td>{{(detail && detail.treasure && detail.treasure.dig_consume1) || 0}}</td>
                            <td>{{(detail && detail.treasure && detail.treasure.dig_consume2) || 0}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </fieldset>
        </div>
    </div>
</div>

<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    
    var equip = getEnum('equip')
    var equipconfig =getEnum('equipconfig')
    var petconfig =getEnum('petconfig')

    new Vue({
        el:"#app",
        data:{
            equip:equip,
            equipconfig:equipconfig,
            petconfig:petconfig,
            services:JSON.parse(localStorage.getItem('services')),
            detail:null,
            pay:{list:[],total:0,totalAmount:0,totalTimes:0,page:1,limit:15},
            // 缓存枚举数据，避免重复查找
            equipMap: {},
            petMap: {},
            itemMap: {},
            // 加载状态
            isLoading: false,
            dataStats: {
                petCount: 0,
                combatCount: 0,
                bagCount: 0
            }
        },
        mounted:function () {
            var vm = this;
            // 初始化枚举数据映射，提升查找性能
            vm.initEnumMaps();
            layui.use(['form', 'table','laydate','laytpl','laypage'], function () {
                var isLodedTable = false;
                var $ = layui.jquery,
                    form = layui.form,
                    table = layui.table
                    ,laydate=layui.laydate,laytpl=layui.laytpl,laypage=layui.laypage;

       
                // 提交查询
                form.on('submit(data-search-btn)', function (data) {
                    var params = data.field;
                    if(!params.gameArea){layer.msg('请选择区服');return false}
     
                    var load = layer.load(2);
                    
                    // 先加载基础角色信息
                    vm.isLoading = true;
                    var startTime = Date.now();
                    
                    $.get('/admin/gameRoledetail/detail', params, function(res){
                        layer.close(load);
                        var loadTime = Date.now() - startTime;
                        console.log('角色详情接口返回：', res, '加载时间：' + loadTime + 'ms');
                        
                        if(res && res.code === 0){
                            // 统计数据量
                            var data = res.data || {};
                            vm.dataStats = {
                                petCount: (data.pet && data.pet.list) ? data.pet.list.length : 0,
                                combatCount: (data.combat && data.combat.list) ? data.combat.list.length : 0,
                                bagCount: (data.bag && data.bag.list) ? data.bag.list.length : 0
                            };
                            console.log('数据统计：', vm.dataStats);
                            
                            vm.detail = data;
                            
                            // 数据获取后立即进行预处理
                            vm.preprocessData();
                            
                            // 立即开始加载付费信息
                            console.log('开始请求付费信息，参数：', params);
                            vm.fetchPay(1, vm.pay.limit, params);
                            
                            vm.isLoading = false;
                        }else{
                            console.log('角色详情查询失败：', res);
                            if(res.code === -1 && res.msg === 'token过期'){
                                layer.msg('登录已过期，请重新登录', {icon: 2});
                            }else{
                                layer.msg(res.msg || '查询失败', {icon: 2});
                            }
                            vm.detail = null;
                            vm.pay = {list:[],total:0,totalAmount:0,totalTimes:0,page:1,limit:15};
                            vm.isLoading = false;
                        }
                    }).fail(function(xhr, status, error) {
                        layer.close(load);
                        console.log('角色详情请求失败：', xhr, status, error);
                        layer.msg('请求失败：' + error);
                        vm.detail = null;
                        vm.pay = {list:[],total:0,totalAmount:0,totalTimes:0,page:1,limit:15};
                        vm.isLoading = false;
                    });
                    return false;
                });
            });
        },
        computed:{
            petList:function(){
                var p = this.detail && this.detail.pet;
                if(!p) return [];
                if(Array.isArray(p.list)) {
                    // 限制显示数量，避免渲染过多数据
                    var limitedList = p.list.slice(0, 50);
                    return limitedList.map(function(item){
                        return item.data || item;
                    });
                }
                return [];
            },
            combatList:function(){
                var c = this.detail && this.detail.combat;
                if(c && Array.isArray(c.list)) {
                    // 限制装备列表显示数量
                    return c.list.slice(0, 20);
                }
                return [];
            },
            bagList:function(){
                var b = this.detail && this.detail.bag;
                if(b && Array.isArray(b.list)) {
                    // 限制背包列表显示数量
                    return b.list.slice(0, 100);
                }
                return [];
            }
        },
        // 移除watch监听器，避免无限循环
        // 改为在数据获取后手动调用预处理
        methods:{
            // 初始化枚举数据映射，将数组转换为对象，提升查找性能
            initEnumMaps: function() {
                var vm = this;
                
                // 装备配置映射
                if (vm.equipconfig) {
                    vm.equipMap = {};
                    for (var i = 0; i < vm.equipconfig.length; i++) {
                        var item = vm.equipconfig[i];
                        vm.equipMap[item.id] = item;
                    }
                }
                
                // 宠物配置映射
                if (vm.petconfig) {
                    vm.petMap = {};
                    for (var i = 0; i < vm.petconfig.length; i++) {
                        var item = vm.petconfig[i];
                        vm.petMap[item.pid] = item;
                    }
                }
                
                // 道具配置映射
                if (vm.equip) {
                    vm.itemMap = {};
                    for (var i = 0; i < vm.equip.length; i++) {
                        var item = vm.equip[i];
                        vm.itemMap[item.id] = item;
                    }
                }
            },
            // 预处理数据，减少模板中的重复计算
            preprocessData: function() {
                var vm = this;
                if (!vm.detail) return;
                
                // 防止重复处理
                if (vm.detail._preprocessed) {
                    console.log('数据已预处理，跳过');
                    return;
                }
                
                console.log('开始预处理数据...');
                
                // 预处理时间字段（同步，数据量小）
                if (vm.detail.createtime && !vm.detail._createtime) {
                    vm.detail._createtime = vm.fmt(vm.detail.createtime);
                }
                if (vm.detail.logintime && !vm.detail._logintime) {
                    vm.detail._logintime = vm.fmt(vm.detail.logintime);
                }
                
                // 使用 requestAnimationFrame 确保不阻塞UI渲染
                requestAnimationFrame(function() {
                    vm.preprocessPetData();
                });
                
                requestAnimationFrame(function() {
                    vm.preprocessCombatData();
                });
                
                requestAnimationFrame(function() {
                    vm.preprocessBagData();
                });
                
                // 标记已预处理
                vm.detail._preprocessed = true;
                console.log('数据预处理完成');
            },
            
            // 预处理宠物数据
            preprocessPetData: function() {
                var vm = this;
                if (vm.detail.pet && vm.detail.pet.list && !vm.detail.pet._preprocessed) {
                    console.log('开始预处理宠物数据，数量：', vm.detail.pet.list.length);
                    var limitedList = vm.detail.pet.list.slice(0, 50);
                    vm.detail.pet.list = limitedList.map(function(item) {
                        var petData = item.data || item;
                        if (petData && petData.time && Array.isArray(petData.time) && !petData._timeDisplay) {
                            petData._timeDisplay = {
                                activate: vm.getTimeDisplay(petData.time, 0),
                                advance1: vm.getTimeDisplay(petData.time, 1),
                                advance2: vm.getTimeDisplay(petData.time, 2)
                            };
                        }
                        return petData;
                    });
                    vm.detail.pet._preprocessed = true;
                    console.log('宠物数据预处理完成');
                }
            },
            
            // 预处理装备数据
            preprocessCombatData: function() {
                var vm = this;
                if (vm.detail.combat && vm.detail.combat.list && !vm.detail.combat._preprocessed) {
                    console.log('开始预处理装备数据，数量：', vm.detail.combat.list.length);
                    var limitedList = vm.detail.combat.list.slice(0, 20);
                    vm.detail.combat.list = limitedList.map(function(item) {
                        if (item.data && !item.data._equipName) {
                            item.data._equipName = vm.getEquipName(item.data.id);
                            item.data._equipLevel = vm.getEquipLevel(item.data.id);
                            item.data._equipQuality = vm.getEquipQuality(item.data.id);
                        }
                        return item;
                    });
                    vm.detail.combat._preprocessed = true;
                    console.log('装备数据预处理完成');
                }
            },
            
            // 预处理背包数据
            preprocessBagData: function() {
                var vm = this;
                if (vm.detail.bag && vm.detail.bag.list && !vm.detail.bag._preprocessed) {
                    console.log('开始预处理背包数据，数量：', vm.detail.bag.list.length);
                    var limitedList = vm.detail.bag.list.slice(0, 100);
                    vm.detail.bag.list = limitedList.map(function(item) {
                        if (item.data && !item.data._itemName) {
                            item.data._itemName = vm.getItemName(item.data.id);
                            item.data._itemQuality = vm.getItemQuality(item.data.id);
                        }
                        return item;
                    });
                    vm.detail.bag._preprocessed = true;
                    console.log('背包数据预处理完成');
                }
            },
            fmt:function(ts){
                if(!ts) return '-';
                try{ 
                    // 如果是字符串格式的时间，直接返回
                    if(typeof ts === 'string' && ts.includes('-')){
                        return ts;
                    }
                    // 如果是时间戳，转换为时间格式
                    return getYMDHMS(ts);
                }catch(e){ 
                    return ts; 
                }
            },
            getEquipName:function(id){
                if(!id) return 'ID:'+id;
                var item = this.equipMap[id];
                return item ? item.name : 'ID:'+id;
            },
            getEquipLevel:function(id){
                if(!id) return 'ID:'+id;
                var item = this.equipMap[id];
                return item ? item.level : 'ID:'+id;
            },
            getEquipQuality:function(id){
                if(!id) return '';
                var item = this.equipMap[id];
                return item ? item.ItemQuality : '';
            },
            getItemName:function(id){
                if(!id) return 'ID:'+id;
                var item = this.itemMap[id];
                return item ? item.name : 'ID:'+id;
            },
            getItemQuality:function(id){
                if(!id) return '';
                var item = this.itemMap[id];
                return item ? item.ItemQuality : '';
            },
            getPetName:function(petData){
                if(!petData) return 'ID:'+(petData && petData.id || '');
                var pid = petData.id * 10 + (petData.stage || 0);
                var item = this.petMap[pid];
                return item ? item.name : 'ID:'+petData.id;
            },
            getTimeDisplay:function(timeArray, index){
                if(!timeArray || !Array.isArray(timeArray) || index >= timeArray.length){
                    return 0;
                }
                var timestamp = timeArray[index];
                if(!timestamp || timestamp === 0){
                    return 0;
                }
                try{
                    return getYMDHMS(timestamp);
                }catch(e){
                    return timestamp;
                }
            },
            getLastLoginTime:function(detail){
                if(!detail) return '-';
                // 优先从tickData数组的第一个元素获取最近登录时间
                if(detail.tickData && Array.isArray(detail.tickData) && detail.tickData.length > 0){
                    var timestamp = detail.tickData[0];
                    if(timestamp && timestamp > 0){
                        return this.fmt(timestamp);
                    }
                }
                // 如果tickData没有有效数据，回退到原来的logintime
                return detail._logintime || this.fmt(detail.logintime);
            },
            fetchPay:function(page,limit,baseParams){
                var vm = this;
                var params = Object.assign({}, baseParams || {});
                params.page = page || vm.pay.page;
                params.limit = limit || vm.pay.limit;
                params.status = 1;

                console.log('fetchPay 参数检查：', params);
                // 没有查询条件则不查
                if(!params.roleId ){
                    console.log('没有roleId，跳过付费信息请求');
                    vm.pay = {list:[],total:0,totalAmount:0,totalTimes:0,page:1,limit:15};
                    return;
                }
                console.log('开始请求付费信息接口：', '/admin/payOrder/paginate', params);
                layui.use(['jquery','laypage'], function(){
                    var $ = layui.jquery, laypage = layui.laypage;
                    $.get('/admin/payOrder/paginate', params, function(res){
                        console.log('付费信息接口返回：', res);
                        if(res && res.code === 0){
                            // 接口返回的data直接是数组，需要重新构造数据结构
                            var orderList = res.data || [];
                            var totalAmount = 0;
                            var totalTimes = orderList.length;
                            
                            // 计算总金额
                            for(var i = 0; i < orderList.length; i++){
                                totalAmount += (orderList[i].fee || 0);
                            }
                            
                            console.log('处理后的付费信息数据：', {
                                list: orderList,
                                total: res.count || orderList.length,
                                totalAmount: totalAmount,
                                totalTimes: totalTimes
                            });
                            
                            // 使用Vue.set确保响应式更新
                            vm.$set(vm.pay, 'list', orderList);
                            vm.$set(vm.pay, 'total', res.count || orderList.length);
                            vm.$set(vm.pay, 'totalAmount', totalAmount);
                            vm.$set(vm.pay, 'totalTimes', totalTimes);
                            vm.$set(vm.pay, 'page', params.page);
                            vm.$set(vm.pay, 'limit', params.limit);
                            // 渲染分页
                            laypage.render({
                                elem: 'pay-pager',
                                count: vm.pay.total,
                                curr: vm.pay.page,
                                limit: vm.pay.limit,
                                layout: ['prev','page','next','count','limit','skip'],
                                limits: [15,30,50,100],
                                jump: function(obj, first){
                                    if(!first){
                                        vm.fetchPay(obj.curr, obj.limit, baseParams);
                                    }
                                }
                            });
                        }else{
                            vm.$set(vm.pay, 'list', []);
                            vm.$set(vm.pay, 'total', 0);
                            vm.$set(vm.pay, 'totalAmount', 0);
                            vm.$set(vm.pay, 'totalTimes', 0);
                            vm.$set(vm.pay, 'page', 1);
                            vm.$set(vm.pay, 'limit', 15);
                            document.getElementById('pay-pager').innerHTML='';
                        }
                    });
                });
            }
        }
    })

</script>
</body>
</html>